<template>
	<view class="video-contain" @touchmove.stop="">
		<!-- 自定义头部 -->
		<go-back />
		<!-- 滑动遮罩 -->

		<view style="position:relative;width:100%;height: 100vh;">
			<swiper :vertical="true" :skip-hidden-item-layout="true" :current="swiperCurrent" @change="handleChange">
				<swiper-item v-for="(item,index) of list" :key="index">
					<video :controls="false" :enable-progress-gesture="false" :enable-play-gesture="true" object-fit="cover" :poster="detailInfo.img"
					 :src="detailInfo.video_url" :enable-danmu="isOpenDanmu" :danmu-list="detailInfo.danmuList" :autoplay="true" id="myVideo"
					 @error="videoError" @timeupdate="timeupdate" v-if="index === swiperCurrent" />
					<video :controls="false" :enable-progress-gesture="false" object-fit="cover" v-else-if="index === swiperCurrent - 1" />
					<video :controls="false" :enable-progress-gesture="false" object-fit="cover" v-else-if="index === swiperCurrent + 1" />
				</swiper-item>
			</swiper>
			<view class="video-wrap">
				<view class="video-cont">
					<view class="flex flex-direction align-center">
						<button class="cu-btn custom-share-btn" @click="handleShowPopup">
							<image src="/static/icons/live-share.png" mode="widthFix" />
						</button>
					</view>
					<view class="flex flex-direction align-center margin-top-sm">
						<button class="cu-btn custom-share-btn" @click="handleCollect">
							<image src="/static/icons/adminvideo-like.png" mode="widthFix" v-if="!!detailInfo.collect" />
							<image src="/static/icons/adminvideo-unlike.png" mode="widthFix" v-else />
						</button>
						<view class="text-xs text-white">{{detailInfo.collects_count || 0}}</view>
					</view>
					<view class="flex flex-direction align-center margin-top-sm">
						<button class="cu-btn custom-share-btn" @click="handleLike">
							<image src="/static/icons/live-like.png" mode="widthFix" v-if="!!detailInfo.like" />
							<image src="/static/icons/live-unlike.png" mode="widthFix" v-else />
						</button>
						<view class="text-xs text-white">{{detailInfo.likes_count || 0}}</view>
					</view>
					<view class="flex flex-direction align-center margin-top-sm">
						<button class="cu-btn custom-share-btn" @click="showComment">
							<image src="/static/icons/comment.png" mode="widthFix" />
						</button>
						<view class="text-xs text-white">{{detailInfo.comments_count || 0}}</view>
					</view>
					<!-- 弹幕 -->
					<view class="flex flex-direction align-center">
						<button class="cu-btn custom-share-btn" @click="handleToggleDanmu">
							<image src="/static/icons/dan.png" mode="widthFix" v-if="isOpenDanmu" />
							<image src="/static/icons/dan-close.png" mode="widthFix" v-else />
						</button>
						<view class="text-xs text-white">{{detailInfo.danmus_count || 0}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 发布弹幕 -->
		<view class="dan-wrap padding-lr-sm" :style="{bottom:`${InputBottom}px`}">
			<view class="input-wrap">
				<view class="dan-icon">
					<text style="font-size:18upx;">弹</text>
				</view>
				<input placeholder="输入弹幕内容" class="input-cont" placeholder-style="color:#999999;font-size:24rpx" :adjust-position="false"
				 @focus="InputFocus" @blur="InputBlur" confirm-type="send" v-model="danmuValue" @confirm="handleSendDanmu" />
			</view>
			<view>
				<button class="cu-btn round margin-left-xs" style="height:60upx;background-color: #E24E47;color: #fff;" @click="handleSendDanmu">
					发布
				</button>
			</view>
		</view>



		<!-- 底部分享选择框 -->
		<h-popup type="bottom-modal" :show.sync="showSharePopup">
			<view class="share padding">
				<view class="share-item padding-sm" @click="createPoster">
					生成海报
				</view>
				<view class="share-item padding-sm" style="width:100%;border-top:1px solid #eee;border-bottom: 1px solid #eee;">
					<button class="cu-btn" open-type="share" style="width:100%;background:transparent">
						分享好友
					</button>
				</view>
				<view class="share-item padding-sm" @click="handleShowPopup">
					取消
				</view>
			</view>
		</h-popup>
		<!-- 海报 -->
		<my-poster ref="hchPoster" :canvasFlag.sync="canvasFlag" :posterObj.sync="posterData" />
	</view>
</template>

<script>
	import HPopup from '@/components/HPopup'
	import goBack from "@/components/GoBack"
	import MyPoster from '@/components/MyPoster'
	export default {
		data() {
			return {
				id: -1,
				detailInfo: null,
				showSharePopup: false,
				posterData: {},
				canvasFlag: true,
				danmuValue: "", //弹幕
				isOpenDanmu: true, //是否开启弹幕
				InputBottom: 0,
				time: 0, //发送弹幕的时间
				videoContext: null,
				swiperCurrent: 0,
				list: []
			}
		},
		components: {
			goBack,
			HPopup,
			MyPoster
		},
		methods: {
			handleChange(e) {
				let curr = e.detail.current
				this.id = this.list[curr].id
				this.detailInfo = null
				if (this.list[curr].data) {
					this.getVideoDetail(this.list[curr].id)
					// this.detailInfo = this.list[curr].data
				} else {
					this.getVideoDetail(this.list[curr].id)
				}
				this.swiperCurrent = curr
			},
			//获取下一个的id，并插入到列表中
			async getList(id) {
				let query = {
					type: 1,
					data_type: 2,
					data_id: id
				}
				let {
					data
				} = await this.$h.api.videoModel.getSearch(query)
				if (data.next && this.list.findIndex(e => e.id === data.next) < 0) {
					this.setList(data.next, null)
				}
			},
			//向list中插入数据
			setList(id, data) {
				let index = this.list.findIndex(e => e.id === id)
				if (index >= 0) {
					this.$set(this.list, index, {
						id,
						data
					})
				} else {
					this.list.push({
						id,
						data
					})
				}
			},
			//获取视频详情
			async getVideoDetail(id) {
				let query = {
					id
				}
				let {
					data
				} = await this.$h.api.videoModel.getVideoDetail(query)
				data[0].danmuList = await this.getDanmus(id)
				if (this.id === id) {
					this.detailInfo = data[0]
				}
				this.setList(id, Object.assign({}, data[0]))
				this.getList(id)
			},
			async getDanmus(id) {
				let query = {
					id
				}
				let {
					data
				} = await this.$h.api.videoModel.getDanmus(query)
				return data.danmus
			},
			showComment() {
				this.$h.router.push({
					path: "/pages/video/adminVideo/comment",
					params: {
						id: this.id
					}
				})
			},
			async handleCollect() {
				let isCollect = !!this.detailInfo.collect
				let api = isCollect ? this.$h.api.videoModel.postVideoUnCollect : this.$h.api.videoModel.postVideoCollect
				let query = {
					id: this.detailInfo.id
				}
				let {
					code
				} = await this.waitingLoading(api, true)(query)
				if (code == 1) {
					this.$set(this.detailInfo, 'collect', isCollect ? 0 : 1)
					let info = this.$h.utils.deepClone(this.detailInfo)
					let counts = info.collects_count
					this.$set(this.detailInfo, 'collects_count', isCollect ? --counts : ++counts)
				}
			},
			async handleLike() {
				let isLike = !!this.detailInfo.like
				let api = isLike ? this.$h.api.videoModel.postVideoUnLike : this.$h.api.videoModel.postVideoLike
				let query = {
					video_id: this.detailInfo.id
				}
				let {
					code
				} = await this.waitingLoading(api, true)(query)
				if (code == 1) {
					this.$set(this.detailInfo, 'like', isLike ? 0 : 1)
					let info = this.$h.utils.deepClone(this.detailInfo)
					let counts = info.likes_count
					this.$set(this.detailInfo, 'likes_count', isLike ? --counts : ++counts)
				}
			},
			handleShowPopup() {
				this.showSharePopup = !this.showSharePopup
			},
			//生成海报
			async createPoster() {
				this.$h.api.videoModel.postShareVideo({
					video_id: this.detailInfo.id,
					share_type: "wecircle"
				})
				this.handleShowPopup()
				let query = {
					id: this.id,
					type: "video"
				}
				let {
					data,
					code
				} = await this.$h.api.codeModel.getWXCode(query)
				if (code === 1) {
					this.canvasFlag = false
					let {
						avatar,
						head_img,
						title,
						nickname,
						code_img
					} = data.data
					if (!avatar || !nickname) {
						this.$h.toast("请先完善个人信息")
						return
					}
					this.posterData = {
						avatar,
						url: head_img, //商品主图
						title, //标题
						userInfo: nickname,
						subTitle: "我刚分享了",
						code: code_img, //小程序码
					}
					this.$nextTick(function() {
						this.$refs.hchPoster.createCanvasImage(); //调用子组件的方法
					})
				}
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			//生成随机颜色
			getRandomColor() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			//发送弹幕
			async handleSendDanmu() {
				let color = this.getRandomColor()
				let query = {
					video_id: this.detailInfo.id,
					time: ~~this.time,
					text: this.danmuValue,
					color
				}
				let {
					code
				} = await this.$h.api.videoModel.postDanmu(query)
				if (code === 1) {
					this.videoContext.sendDanmu({
						text: this.danmuValue,
						color
					});
					this.danmuValue = '';
					//获取弹幕列表
					let danmuList = await this.getDanmus(this.detailInfo.id)
					this.$set(this.detailInfo, 'danmuList', danmuList)
					this.$set(this.detailInfo, 'danmus_count', danmuList.length)
				}
			},
			//获取当前视频播放的时间
			timeupdate(e) {
				this.time = e.detail.currentTime
			},
			handleToggleDanmu() {
				this.isOpenDanmu = !this.isOpenDanmu
			},
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getVideoDetail(id)
		},
		onReady() {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo', this)
			// #endif
		},
		//分享
		onShareAppMessage() {
			// let query = {
			// 	video_id: this.detailInfo.id
			// }
			// this.$h.api.videoModel.postShareVideo(query)
			this.showSharePopup=false
			return {
				title: this.detailInfo.title,
				imageUrl: this.detailInfo.img,
				path: `/pages/home/home?type=share_adminVideo&id=${this.detailInfo.id}`
			}
		},
	}
</script>

<style lang="scss" scoped>
	/* pages/Main/myVideo/index.wxss */
	page {
		width: 100%;
		height: 100%;
	}

	.video-contain {
		width: 100%;
		height: 100%;

		swiper {
			position: relative;
			height: 100%;
			width: 100%;

			video {
				width: 100vw;
				height: 100vh;
			}
		}

		//评论弹幕
		.dan-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 20;
			height: 113rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// background: rgba(255, 255, 255, 1);
			padding-bottom: 15rpx;

			// box-shadow:0px 8px 13px 1px rgba(51, 51, 51, 0.35);
			.input-wrap {
				flex: 1;
				display: flex;
				align-items: center;
				height: 60upx;
				background: rgba(237, 237, 237, 1);
				border-radius: 15px;
				position: relative;

				.input-cont {
					height: 100%;
					padding-left: 60upx;
				}

				.dan-icon {
					position: absolute;
					top: 50%;
					left: 10upx;
					width: 40upx;
					height: 40upx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: -20upx;
					border-radius: 50%;
					background-color: #E24E47;
					color: #fff;
				}
			}
		}

		.video-wrap {
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			right: 10px;
			height: 200px;
			padding: 30px 10px;

			.cu-btn.custom-share-btn {
				width: 60rpx;
				height: 60rpx;
				padding: 0;
				background-color: rgba(0, 0, 0, 0);
				margin-bottom: 8rpx;

				& image {
					width: 56rpx;
					height: 56rpx;
				}

				&.text {
					width: 160rpx;
					font-size: 18rpx;
					color: #fff;
					background-color: #09BB07;
					padding: 0 16rpx;

					image {
						width: 36rpx;
					}
				}
			}

			.cu-avatar.custom-avatar {
				width: 80rpx;
				height: 80rpx;
			}



		}
	}
</style>
